<template>
  <CommonHeader :title="title" :url="url"/>
  <div class="course-statistic">
    <div class="one">
      <p class="text">缺勤次数</p>
      <p class="value">{{ statistic.qq }}</p>
    </div>
    <div class="one">
      <p class="text">签到次数</p>
      <p class="value">{{ statistic.all }}</p>
    </div>
    <div class="one">
      <p class="text">迟到次数</p>
      <p class="value">{{ statistic.cd }}</p>
    </div>
    <div class="one">
      <p class="text">请假次数</p>
      <p class="value">{{ statistic.qj }}</p>
    </div>
  </div>
  <div class="course-list">
    <div v-for="(item, index) in courses" class="row">
      <div class="name">{{ item.course_name }}</div>
      <div class="status">
        <el-button type="primary" size="small" @click="doSignin(item)"  v-if="item.status==0">去签到</el-button>
        <el-text class="mx-1" type="success" v-else>已签到</el-text>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import CommonHeader from '@/components/CommonTitle.vue'
import { signin, courseInfo } from '@/api/student'

const courses = ref([]); //课程列表
const statistic = ref({qq:0, all:0, cd:0, qj:0});//签到统计

const url  = "/" //返回上一页地址
const title = "今日课程列表"

const doSignin = (row)=>{
  const data = {
      cid: row.course_id, 
      pwd: '',
      lng: 0,
      lat: 0
  };
  signin(data).then(res=>{
      if(res.code==0){
        ElMessage({
          message: '签到成功',
          type: 'success',
        })
        //更新状态
        loadData();

      }else{
        ElMessage.error(res.msg);
      }
  })
}

const loadData = ()=>{
  courseInfo().then(res=>{
    courses.value = res.data.rows
    statistic.value = res.data.statistic;
  })
}

onMounted(()=>{
  loadData();
})
</script>

<style scoped>
.course-statistic{
  padding:15px 5px;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  border-bottom:solid 1px #ccc;
}
.course-statistic .one .text{
  font-size:16px;
  padding:10px 0px;
}
.course-statistic .one .value{
  font-size:24px;
}
.course-statistic .one p{
  text-align:center;
}
.course-list{
  padding:10px 30px;
  font-size:15px;
  color:#666;
}
.course-list .row {
  padding:12px 0px 8px 0px;
  min-height:24px;
}
.course-list .row .name{
  clear:both;
  float:left;
  width:80%;
}
.course-list .row .status{
  float:left;
  width:20%;
  text-align:right;
}
</style>
